module.exports = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    var myApp = new Framework7();
    var dom = Dom7(this.props.triggerId);
    dom.on('click', function () {
      console.log('trigger!!!!')
      myApp.pickerModal('.picker-info')
    });
  },
  render: function() {
    return (
      <div className="picker-modal picker-info">
      <div>
        <div className="row">
          <div className="left"/>
          
        </div>
        <ul>
          <li className="row">
            <div styles={{fontSize:"35px"}} className="catalogIMG"><img src="//img5.duitang.com/uploads/item/201407/16/20140716214827_deyUt.thumb.700_0.jpeg"></img></div>
            <div>
              <span className="catalogName">幸福双人拿</span>
              <span className="catalogTime">／&nbsp;100分钟</span><br></br>
              <span className="catalogPrice">￥268</span>
            </div>
            <div className="right"><i className="fa fa-times close-picker" style={{fontSize:'20px'}}></i></div>
          </li>
          <li className="quantity">
            <div className="row">
              <div className="label">购买数量</div>
              <div className="ctrl">
                <span className="buttons-row">
                  <a href="#" className="button ">-</a>
                  <a href="#" className="button " style={{color:"black"}}>1</a>
                  <a href="#" className="button ">+</a>
                </span>
              </div>
            </div>
          </li>
        </ul>
        <ul className="campaign">
          <li className="row product">
              <div className="selector">
                <span>
                  <i className="fa fa-circle-thin fa-2x" style={{color:"#989898",marginLeft:"-1.5em"}}></i>
                  <i className="sex-check-icon"></i>
                </span>
              </div>
              <div>
                <span><i className="catalogName">健脾养胃</i><i className="catalogTime">／&nbsp;100分钟</i></span>
                <br></br>
                <span className="catalogPrice">
                  <i className="campaignFlag">限时优惠</i>
                  <em>￥268</em>
                </span>
                <br></br>
                <span className="catalogDescription">
                  气虚失眠易肥胖，便秘腹泻常感冒，脾胃推拿效果好！
                </span>
              </div>
          </li>
          <li className="quantity">
            <div className="row">
              <div className="label">购买数量</div>
              <div className="ctrl">
                <span className="buttons-row">
                  <a href="#" className="button ">-</a>
                  <a href="#" className="button " style={{color:"black"}}>1</a>
                  <a href="#" className="button ">+</a>
                </span>
              </div>
            </div>
          </li>
        </ul>
        <ul className="total">
          <li className="row" style={{border:'none'}}>
            <div>
              <span className="totalFee">合计：￥268</span>
              <br></br>
              <span className="totalTime" style={{marginLeft:'4em',fontSize:'12px'}}>120分钟</span>
            </div>
            <div className="right"><a href="#" className="button" >下一步</a></div>
          </li>
        </ul>
      </div>
    </div>
    );
  }
});
